<template>
  <div>
    <!-- 面包屑导航 -->
    <bread-crumb :breadPath="breadPath"></bread-crumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <el-button type="primary" @click="showAddDialog()">添加分类</el-button>
      <!-- 分类表格区 -->
      <tree-table 
        :data="goodsCateList" :columns="columns"
        :selection-type="false" :expand-type="false"
        show-index index-text="#" class="treeTable"
        border :show-row-hover="false">
        <!-- 是否有效 -->
        <template v-slot:isok="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <!-- 商品级别 -->
        <template v-slot:order="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template v-slot:operation="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.cat_id)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>
        </template>
      </tree-table>
      <!-- 分页区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querInfo.pagenum"
        :page-sizes="[5, 10, 15]"
        :page-size="querInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="90px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- 级联选择器 options用于指定数据源 -->
          <!-- props 用于指定配置对象 -->
          <el-cascader v-model="selectedKeys" :options="ParentCateList"
                      :props="cascaderProps" @change="parentCateChanged" clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 对话框 -->
    <el-dialog title="编辑分类名称" :visible.sync="editDialogVisible" width="50%">
      <!-- 内容主体区 -->
      <el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="90px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import breadCrumb from '@/components/breadcrumb'
  import { getCategories, postAddCate, deleteGoodCate, getCateById, putEditCateById } from '@/api/goods.js';

  export default {
    data() {
      return {
        // 查询条件
        querInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 5
        },
        // 面包屑 传参
        breadPath: ['商品管理', this.$route.query.bread],
        // 商品分类数据列表
        goodsCateList: [],
        // 总数据条数
        total: 0,
        // 数据表格 列的定义
        columns: [{
          label: '分类名称',
          prop: 'cat_name'
        },{
          label: '是否有效',
          // 表示，将当前列定义为模板列
          type: 'template',
          // 表示当前列使用的模板名称
          template: 'isok'
        },{
          label: '排序',
          type: 'template',
          template: 'order'
        },{
          label: '操作',
          type: 'template',
          template: 'operation'
        }],
        // 控制添加分类对话框的显示和隐藏
        addDialogVisible: false,
        // 控制编辑分类对话框的显示和隐藏
        editDialogVisible: false,
        // 添加分类表单 数据
        addForm: { cat_pid: 0, cat_name: '', cat_level: 0 },
        // 编辑分类表单 数据
        editForm: { cat_pid: 0, cat_name: '' },
        // 添加分类表单 校验规则
        addFormRules: {
          cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 2, max: 9, message: '长度在 2 到 9 个字符', trigger: 'blur' }
          ]
        },
        // 添加表单 父级分类选项 数据
        ParentCateList: [],
        // 添加表单 级联选择器 当前选中的数值value
        selectedKeys: [],
        // 级联选择器的  配置参数
        cascaderProps: {
          expandTrigger: 'hover',
          value: 'cat_id',
          label: 'cat_name',
          children: 'children',
          checkStrictly: true
        }
      }
    },
    created() {
      // 获取商品分类数据列表
      this.getGoodsCate();
    },
    methods: {
      // 获取商品分类数据列表
      async getGoodsCate(){
        const { data: res } = await getCategories(this.querInfo).catch(err => err);
        // console.log(res);
        this.goodsCateList = res.result;
        this.total = res.total;
        // console.log(this.total);
      },
      // 更改每页条数时调用
      handleSizeChange(newSize) {
        this.querInfo.pagesize = newSize;
        this.getGoodsCate();
      },
      // 更改当前页时调用
      handleCurrentChange(newPage) {
        this.querInfo.pagenum = newPage;
        this.getGoodsCate();
      },
      // 点击添加按钮 展示对话框
      showAddDialog() {
        this.getParentCateList();
        this.addDialogVisible = true;
      },
      // 关闭对话框后调用表单重置
      addDialogClosed() {
        this.$refs.addFormRef.resetFields();
        this.selectedKeys = [];
      },
      // 获取添加表单 的父级分类列表
      async getParentCateList() {
        const { data: res } = await getCategories({type: 2}).catch(err => err);
        this.ParentCateList = res;
        // console.log(this.ParentCateList);
      },
      // 级联选择器选项改变时 触发该函数
      parentCateChanged(value) {
        this.selectedKeys = value;
        // console.log(this.selectedKeys,' ',this.addForm.cat_name);
      },
      // 点击确定按钮 添加商品分类
      addCate() {
        this.$refs.addFormRef.validate((valid) => {
          if (!valid) { return ; }
          // 判断是否选择了父级分类
          if(this.selectedKeys.length > 0){
            // 将父级分类的id 存到当前表单的数据中 addForm
            this.addForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
            // 分类等级cat_level正好对应数组的length
            this.addForm.cat_level = this.selectedKeys.length;
          }
          // console.log(this.addForm);
          postAddCate(this.addForm)
            .then(()=>{
              this.$message.success('添加分类成功！');
              this.getGoodsCate();
              this.addDialogVisible = false;
            }).catch(() => {
              this.$message.error('操作失败！')});
        })
      },
      // 删除分类操作
      async removeCateById(id) {
        const confirmResult = await this.$confirm('此操作将永久删除该商品分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err);
        // 如果 确认 ，返回值为 字符串类型 confirm
        // 如果 取消 ，返回值为 字符串类型 cancel
        // console.log(confirmResult);
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除');
        }
        deleteGoodCate(id)
          .then(()=>{
              this.$message.success('已删除该商品分类');
              this.querInfo.pagenum = 1;
              this.getGoodsCate();
          }).catch(() => {this.$message.error('操作失败！')})
      },
      // 显示 编辑对话框
      async showEditDialog(id) {
        const { data: res } = await getCateById(id).catch(err => err);
        this.editForm = res;
        // console.log(this.editForm);
        this.editDialogVisible = true;
      },
      // 根据id编辑分类
      async editCate() {
        this.$refs.editFormRef.validate((valid) => {
          if (!valid) { return ; }
          putEditCateById(this.editForm)
            .then(()=>{
              this.getGoodsCate();
              // this.updataEditList(res.data, this.goodsCateList);
              this.$message.success('已修改该分类名称');
              this.editDialogVisible = false;
            }).catch(() => {this.$message.error('操作失败！')});
          })
      },
      // 修改分类后 只更新需要更新的数据 
      // updataEditList(data, CateList){
      //   for(let j = 0,len = CateList.length; j < len; j++) {
      //     if(CateList[j].cat_id == data.cat_id) {
      //       CateList[j].cat_name = data.cat_name;
      //     }else if (CateList[j].children) {
      //       this.updataEditList(data, CateList[j].children);
      //     }
      //   }
      //   // for(let i in this.goodsCateList){
      //   //   if(this.goodsCateList[i].cat_id == data.cat_id) {
      //   //     this.goodsCateList[i].cat_name = data.cat_name;
      //   //     console.log(this.rolesList[i]);
      //   //   }
      //   //   if(this.goodsCateList[i].children){
      //   //     this.updataEditList(this.goodsCateList[i].children);
      //   //   }
      //   // }
      // }
    },
    components: {
      breadCrumb
    }
  }
</script>

<style lang="less" scoped>
.treeTable {
  margin-top: 10px;
}
.el-cascader {
  width: 100%;
}
</style>